<template>
	<div id="order-root">
		<div class="order">
			<center class="logo-box">
				<img :src="logoImg" class="logo-img" />
			</center>
			<canvas class="canvas" v-show="false"></canvas>
			<canvas id="canvas" v-show="false"></canvas>
			<img :src="subscriptioImg" class="subscriptio">
			<!-- <center>
				<h2 class="order-title">快速申请</h2>
			</center> -->
			<!-- <div class="tableTitle"><span class="midText"><h3 class="center-title">申请须知</h3></span></div>
			<h4 class="h4">（一）主体服务：（单选）</h4>
			<ul class="ul">
				<li>1- <span class="span2">idea模式：</span> 发明人有想法，并没有成熟的技术方案或设计方案，配图可有可无；</li>
				<li>2- <span class="span2">技术交底模式：</span> 需提供详细技术方案，发明人应对技术方案的内容负责，应该尽量提供清晰明了的配图；</li>
				<li>3- <span class="span2">定向导航：</span> 发明人需要有一定的研究基础，包括已申报专利列表，或项目申请书等定向材料。</li>
			</ul>
			<h4 class="h4">（二）延伸服务：（可多选）</h4>
			<ul class="ul">
				<li>Q- <span class="span2">撰写加速：</span> 撰写时间从30个工作日缩短至10个工作日定稿，价格为<strong>案件单价*2</strong>；</li>
				<li>A- <span class="span2">提交加速：</span> 案件提交时间由集中提交改为单独提交，定稿24h内提交，获取受理通知书，价格为：<strong>300元/件</strong>。</li>
				<li>&nbsp;</li>
				<li><strong>有疑问请拨打：027-597603569-801</strong></li>
				<li>&nbsp;</li>
			</ul> -->
			<div class="tableTitle"><span class="midText">
					<h3 class="center-title">专利信息</h3>
				</span></div>
			<h4 class="h4 applyNo1">申报主体 <span class="required-tag">*</span></h4>
			<ul class="ul">
				<li><span class="span2">1- idea模式：</span><span class="span4"> 发明人有想法，并没有成熟的技术方案或设计方案，配图可有可无；</span></li>
				<li><span class="span2">2- 技术交底模式：</span><span class="span4"> 需提供详细技术方案，发明人应对技术方案的内容负责，应该尽量提供清晰明了的配图；</span></li>
				<li><span class="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）在线填写：</span><span class="span4">根据表单信息填写提交</span></li>
				<li><span class="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）上传文件：</span><span class="span4">无需填写表单，上传文件即可</span></li>
				<li><span class="span2">3- 定向导航：</span><span class="span4"> 发明人需要有一定的研究基础，包括已申报专利列表，或项目申请书等定向材料。</span></li>
				<!-- <li><span class="span2">4- 商标注册</span></li>
				<li><span class="span2">5- 计算机软件著作权登记申请</span></li> -->
			</ul>
			<!-- <el-select class="applyNo1Box" v-model="option1" placeholder="请选择">
				<el-option v-for="item in option1Arr" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
			<el-cascader :options="options" v-model="option1">
			</el-cascader>
			<div v-if="option1[0]=='5'">
				<h4 class="h4 applyNo25">软件全称 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo25Box" placeholder="请输入内容" v-model="option5Val1">
				</el-input>
				<h4 class="h4 applyNo26">软件简介 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo26Box" placeholder="请输入内容" v-model="option5Val2">
				</el-input>
				<h4 class="h4 applyNo27">分类号 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo27Box" placeholder="请输入内容" v-model="option5Val3">
				</el-input>
				<h4 class="h4 applyNo28">版本号 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo28Box" placeholder="例: V1.0/1.0" v-model="option5Val4">
				</el-input>
				<h4 class="h4 applyNo29">软件作品说明</h4>
				<p>原创</p>
				<h4 class="h4 applyNo30">开发完成日期 <span class="required-tag">*</span></h4>
				<el-date-picker class="field applyNo30Box" v-model="option5Val5" type="date" placeholder="选择日期">
				</el-date-picker>
				<h4 class="h4 applyNo31">发表状态 <span class="required-tag">*</span></h4>
				<el-radio-group v-model="option5Val6" class="applyNo31Box">
					<el-radio label="1">已发表</el-radio>
					<el-radio label="2">未发表</el-radio>
				</el-radio-group><br /><br />
				<span class="span4 applyNo32">首次发表日期</span><br />
				<el-date-picker class="field applyNo32Box" v-model="option5Val7" type="date" placeholder="选择日期">
				</el-date-picker><br /><br />
				<span class="span4 applyNo33">首次发表地点</span><br />
				<el-select class="applyNo33Box" placeholder="请选择国家" filterable v-model="option5Val8">
					<el-option-group v-for="group in country" :key="group.label" :label="group.label">
						<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.label">
							<span style="float: left">{{ item.label }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
						</el-option>
					</el-option-group>
				</el-select>
				<el-input class="field applyNo34Box" placeholder="请输入城市" v-model="option5Val9">
				</el-input>
				<h4 class="h4 applyNo35">开发方式</h4>
				<p>独立开发</p>
				<h4 class="h4 applyNo36">权利取得方式</h4>
				<p>原始取得</p>
				<h4 class="h4 applyNo37">硬件环境 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo37Box" v-model="option5Val10" placeholder="指开发和运行该软件的计算机硬件和专用设备。如:“CPU PⅢ，800/内存，128M，硬盘20G以上”"
				 type="textarea" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
				<h4 class="h4 applyNo38">软件环境 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo38Box" v-model="option5Val11" placeholder="指开发和运行该软件的操作系统、支持软件的名称及其版本号。如“WINDOWS 2000/XP/2003”等等。安卓与IOS分开申请"
				 type="textarea" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
				<h4 class="h4 applyNo39">编程语言 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo39Box" v-model="option5Val12" placeholder="指编写该软件的编程工具。如“Java 1.4.3”:VC 6.0，VB 6.0"
				 type="textarea" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
				<h4 class="h4 applyNo40">源程序量 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo40Box" placeholder="（只能填写数字）指本软件源程序的总行数或总条数，如“10000”。" v-model="option5Val13">
				</el-input>
				<h4 class="h4 applyNo41">主要功能和技术特点 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo41Box" v-model="option5Val14" placeholder="主要阐述软件的创作目的、主要功能、用途和技术特点，必须有软件主要功能模块的描述。注意，本栏目中如果出现软件名称，要与申请表中的软件名称一致。不能侵犯他人在先权利。限定350汉字"
				 type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :maxlength="350"></el-input>
				<h4 class="h4 applyNo42">类别 <span class="required-tag">*</span></h4>
				<el-select v-model="option5Val15" placeholder="请选择" class="field applyNo42Box">
					<el-option v-for="item in option5Arr" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<h4 class="h4 applyNo43">名称 <span class="required-tag">*</span></h4>
				<el-input class="field applyNo43Box" placeholder="姓名或名称应与身份证明文件一致" v-model="option5Val16">
				</el-input>
				<h4 class="h4 applyNo44">证件类型 <span class="required-tag">*</span></h4>
				<el-select v-model="option5Val17" placeholder="请选择" class="field applyNo44Box">
					<el-option v-for="item in option6Arr" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<!-- <h4 class="h4 applyNo2">延伸服务 <span class="required-tag">*</span></h4>
			<span class="span4">延伸服务可多选，如果不需要请勿修改，默认为</span><span class="span2">“普通——N”</span><span class="span4">模式</span>
			<br />
			<b class="b">延伸服务包括</b><span class="span2">“急速——Q”</span><span class="span4">和</span><span class="span2">“授权——A”，其中“QA”为双选</span>
			<br />
			<span class="span2">#额外付费项目，每选择一项，案件价格提升一倍</span>
			<br /><br />
			<el-select calss="applyNo2Box" v-model="option2" placeholder="请选择">
				<el-option v-for="item in option2Arr" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
			<div v-if="option1[0] == '1'  || option1[1] == 'a'">
				<div v-if="!isHiddenTextarea">
					<h4 class="h4 applyNo3">技术领域 <span class="required-tag">*</span></h4>
					<span class="span4">直接所属或直接应用的领域</span>
					<br />
					<el-input class="field applyNo3Box" v-model="field" placeholder="请输入内容" :clearable="true"></el-input>
					<h4 class="h4 applyNo4">技术背景 <span class="required-tag">*</span></h4>
					<span class="span4">最接近的同类现有技术是什么样的，存在哪些缺点或不足之处， 最好以文献检索为依据并提供介绍该技术的内容，以及相关专利的申请号</span>
					<el-input class="field applyNo4Box" type="textarea" placeholder="请输入内容" v-model="textarea" :autosize="{ minRows: 4, maxRows: 4}">
					</el-input>
				</div>
				<h4 class="h4 applyNo5">技术问题 <span class="required-tag">*</span></h4>
				<span class="span4">本项目要解决的技术问题，可以是生活中、工作中遇到的困难，或者不方便的地方，技术问题就是要处理的问题或者要解决的困难</span>
				<el-input class="field applyNo5Box" type="textarea" placeholder="请输入内容" v-model="textarea2" :autosize="{ minRows: 4, maxRows: 4}">
				</el-input>
				<h4 class="h4 applyNo6">技术方案 <span class="required-tag">*</span></h4>
				<ul class="ul">
					<li><span class="span2">1- idea模式：</span><span class="span4">提出想法即可，无需具体方案；</span></li>
					<li><span class="span2">2- 技术交底模式：</span><span class="span4">要清楚、完整、准确地详细加以描述，特别是要把区
							别于现有技术的发明点尽可能地描述清楚，以使本领域内的普通技术人员能实施为准，并且在描述技术方案的 每项技术手段时，相应地说明其在本发明中所起的作用。发明点的替代技术方案如果有，也要尽量提出。包括
							上述技术方案为什么能够解决上述技术问题（推理、分析）；</span></li>
					<li><span class="span2">3- 定向导航：</span><span class="span4">发明人需提供该研究方向的基础专利列表或项目实施内容等。</span></li>
					<!-- <li><span class="span2">4- 商标注册</span></li>
					<li><span class="span2">5- 计算机软件著作权登记申请</span></li> -->
				</ul>
				<el-input class="field applyNo6Box" type="textarea" placeholder="请输入内容" v-model="textarea3" :autosize="{ minRows: 4, maxRows: 4}">
				</el-input>
				<h4 class="h4 applyNo7">项目优势 <span class="required-tag">*</span></h4>
				<span class="span4">
					本项目所能达到的效果（包括社会的、经济的、技术的效果，最好有具体数据）具体地、实事求是地进行描述。
				</span>
				<el-input class="field applyNo7Box" type="textarea" placeholder="请输入内容" v-model="textarea4" :autosize="{ minRows: 4, maxRows: 4}">
				</el-input>
				<div v-if="option1[1] == 'a'">
					<h4 class="h4 applyNo8">具体实施方式 <span class="required-tag">*</span></h4>
					<span class="span4">
						应说的详细、具体，能按此再现本技术，如原料的产地、名称、操作程序、组成、配方、用途、 效果、参数、条件、手段等都应尽可能的说明清楚。属于方法的发明，应首先说明为达到发明目的而必须实施
						的方式或操作方法，还应指出该方法必要的各种参数、装置和材料。属于物质的发明在具体实例中，应列举该 物质结构式或组成的成份，物性和比例，并应有试验报告。对于涉及较宽的数值范围时，应给出两端的实施例
						和至少一个中间值的实施例加以说明。
					</span>
					<el-input class="field applyNo8Box" type="textarea" placeholder="请输入内容" v-model="textarea5" :autosize="{ minRows: 4, maxRows: 4}">
					</el-input>
				</div>
			</div>
			<div v-if="option1[0] != '4'">
				<h4 class="h4">附图 <span v-if="option1[1] == 'b'" class="required-tag">*</span></h4>
				<ul class="ul">
					<li><span class="span2">1- idea模式：</span><span class="span4">可以不用上传图片（选填）；</span></li>
					<li><span class="span2">2- 技术交底模式：</span><span class="span4">强烈建议上传配图；</span></li>
					<li><span class="span2">3- 定向导航：</span><span class="span4">强烈建议上传配图；</span></li>
				</ul>
				<el-upload class="upload-demo applyNo1Box" ref="upload" :action="uploadImgUrl" :on-preview="handlePreview" :on-remove="handleRemove"
				 :on-success="handleSuccess" :file-list="fileList" :auto-upload="true" :before-upload="beforeUpload" multiple>
					<el-button slot="trigger" type="primary">上传图片</el-button>
					<!-- <el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传文件</el-button> -->
					<div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件，且不超过10M</div>
				</el-upload>
				<div v-if="option1[0] != '1' && option1[1] != 'a' && option1[0] != '4'">
					<h4 class="h4">附件 <span v-if="option1[1] == 'b'" class="required-tag">*</span></h4>
					<span class="span4">定向导航类 项目需要上传项目书或基础专利文件</span>
					<el-upload class="upload-demo" ref="upload2" :action="uploadFileUrl" :on-preview="handlePreview2" :on-remove="handleRemove2"
					 :on-success="handleSuccess2" :file-list="fileList2" :auto-upload="true" :before-upload="beforeUpload2" multiple>
						<el-button slot="trigger" type="primary">上传文件</el-button>
						<!-- <el-button style="margin-left: 10px;" type="success" @click="submitUpload2">上传文件</el-button> -->
						<div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过100M</div>
					</el-upload>
				</div>
			</div>
			<div v-if="option1[0] != '4' && option1[0] != '5'">
				<h4 class="h4 applyNo9">拟申报专利类型 <span class="required-tag">*</span></h4>
				<span class="span4">可多选，如果选择<span class="span2">不确定</span>则由代理人根据提交内容确定</span>
				<br /><br />
				<el-select class="applyNo9Box" v-model="patent" multiple placeholder="请选择专利类型">
					<el-option v-for="item in patentArr" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<h4 class="h4 applyNo10">拟申报专利名称 <span class="required-tag">*</span></h4>
				<span class="span4">此内容仅供代理人参考，具体专利名称以最后申报定稿时为准</span>
				<el-input class="field  applyNo10Box" placeholder="请输入内容" v-model="patentName">
				</el-input>
				<div class="tableTitle"><span class="midText">
						<h3 class="center-title">专利权人信息</h3>
					</span></div>
				<h4 class="h4 applyNo11">专利权人 <span class="required-tag">*</span></h4>
				<span class="span4">1-专利权人如果为单位，请填写单位名称，如XXXXXX公司，XXXXXXX学校等</span>
				<br />
				<span class="span4">2-如果专利权人为个人，请填写个人姓名，如张三</span>
				<el-input class="field  applyNo11Box" placeholder="请输入内容" v-model="patentedPerson">
				</el-input>
				<div class="tableTitle"><span class="midText">
						<h3 class="center-title">发明人信息</h3>
					</span></div>
				<h4 class="h4 applyNo12">发明人姓名 <span class="required-tag">*</span></h4>
				<span class="span4">如有多个，请用逗号隔开，如，张三，李四，王五</span>
				<el-input class="field applyNo12Box" placeholder="请输入内容" v-model="inventor">
				</el-input>
				<h4 class="h4 applyNo13">第一发明人身份证号码 <span class="required-tag">*</span></h4>
				<span class="span4">请填写正确的18位身份证号码</span>
				<el-input class="field applyNo13Box" placeholder="请输入内容" v-model="IDCard">
				</el-input>
				<div class="tableTitle"><span class="midText">
						<h3 class="center-title">联络人信息</h3>
					</span></div>
				<h4 class="h4 applyNo14">联络人（只写一个） <span class="required-tag">*</span></h4>
				<span class="span4">请填写联络人人姓名</span>
				<el-input class="field applyNo14Box" placeholder="请输入内容" v-model="contacts">
				</el-input>
				<h4 class="h4 applyNo15">联络人电话<span class="required-tag">*</span></h4>
				<span class="span4">请填写正确的手机号码</span>
				<el-input class="field applyNo15Box" placeholder="请输入内容" v-model="contactsPhone">
				</el-input>
				<h4 class="h4 applyNo16">联络人邮箱<span class="required-tag">*</span></h4>
				<span class="span2">#注意：邮箱务必可用，除电话沟通外，代理人可能选择邮箱跟您确认相关内容#</span>
				<el-input class="field applyNo16Box" placeholder="请输入内容" v-model="email">
				</el-input>
				<!-- <h4 class="h4">案件编号</h4>
				<span class="span4">自动生成无需填写</span> -->
			</div>
			<div v-if="option1[0] == '4'">
				<div>
					<div class="tableTitle"><span class="midText">
							<h3 class="center-title">申请人信息</h3>
						</span></div>
					
				</div>
				<div>
					<div class="tableTitle"><span class="midText">
							<h3 class="center-title">商标注册</h3>
						</span></div>
					<h4 class="h4 applyNo20">商标类型 <span class="required-tag">*</span></h4>
					<el-radio-group v-model="trademarkType" class="applyNo20Box">
						<el-radio label="1">文字商标</el-radio>
						<el-radio label="2">图形商标</el-radio>
						<el-radio label="3">文字图形组合商标</el-radio>
					</el-radio-group><br /><br />
					<div v-if="trademarkType != '2'">
						<h4 class="h4 applyNo21" style="display: initial;">商标名称 <span class="required-tag">*</span></h4>
						<el-input class="field applyNo21Box" placeholder="请输入商标名称" v-model="trademarkName"></el-input>
					</div><br />
					<h4 class="h4 applyNo22" style="display: initial;">商标说明 <span class="required-tag">*</span></h4>
					<!-- <el-tooltip class="item" content="只能使用简体中文、英文或阿拉伯数字，不支持其他字符； 商标说明长度应在180个字符以内（汉字算两个字符）。" placement="right-end">
						<i class="el-icon-question" style="font-size: large;"></i>
					</el-tooltip> -->
					<el-input class="field applyNo22Box" type="textarea" placeholder="请输入商标说明例：商标由中文“**”英文“**”及图形构成，无特殊含义。只能使用简体中文、英文或阿拉伯数字，不支持其他字符； 商标说明长度应在180个字符以内（汉字算两个字符）。" v-model="trademarkText"
					 :autosize="{ minRows: 4, maxRows: 4}">
					</el-input>
					<h4 class="h4 applyNo23">商标图样 <span class="required-tag">*</span></h4>
					<div v-if="trademarkType=='1'">
						<el-radio-group v-model="pictureType1" class="applyNo23Box">
							<el-radio label="1">自动生成</el-radio>
							<el-radio label="2">手动生成</el-radio>
						</el-radio-group>
						<br /><br />
					</div>
					<!-- <div v-if="pictureType1=='1'">
						<el-upload class="upload-demo" :limit="1" ref="upload" :action="uploadImgUrl" :on-preview="handlePreview"
						 :on-remove="handleRemove" list-type="picture-card" :on-success="handleSuccess" :file-list="fileList" :auto-upload="true"
						 :before-upload="beforeUpload" multiple disabled>
							<div slot="trigger">
								<p>暂无图片</p>
							</div>
							<div slot="tip" class="el-upload__tip">
								<p><i class="el-icon-info" style="font-size: large;"></i>&nbsp;商标含有文字不应过多，文字过多易造成商标显著性不强而被驳回。</p>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;申请商标应符合法律规定，请勿模仿或复制他人已经注册的商标，以免侵犯他人的合法权益。</p>
							</div>
						</el-upload><br />
						<el-button type="primary" @click="setP">生成图片</el-button>
					</div> -->
					<div v-if="pictureType1=='2' || trademarkType=='2' || trademarkType=='3'">
						<el-radio-group v-model="pictureType2">
							<el-radio label="1" border>黑白图样</el-radio>
							<el-radio label="2" border>彩色图样</el-radio>
						</el-radio-group><br />
						<el-upload class="upload-demo" :limit="1" ref="upload" :action="uploadImgUrl" :on-preview="handlePreview"
						 :on-remove="handleRemove" list-type="picture-card" :on-success="handleSuccess" :file-list="fileList" :auto-upload="true"
						 :before-upload="beforeUpload" multiple>
							<i class="el-icon-plus"></i>
							<div slot="tip" class="el-upload__tip">
								<el-checkbox v-model="isColour">若图样为彩色，则按照指定颜色递交商标局。</el-checkbox><br /><br />
								<p><i class="el-icon-warning-outline" style="font-size: large;"></i>&nbsp;手动上传的商标图样应为200K以内的jpg格式图片，分辨率为500*500~1500*1500。</p>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信合红谷建议使用黑白图样申请商标</p>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;若上传黑白图样，注册后可以根据需求任意更换商标颜色，均被视为注册商标。</p>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;若上传彩色图样，则注册后只能按照上传图样的颜色进行使用，才被认定为注册商标。</p>
								<p style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如您上传的为彩色图样则信合红谷将按照指定颜色商标进行递交</p>
							</div>
						</el-upload>
					</div>
					<h4 class="h4 applyNo24">商标类别 <span class="required-tag">*</span></h4>
					<el-input class="field applyNo24Box" placeholder="请输入内容" v-model="trademarkCategory">
					</el-input>
				</div>
			</div>
			<div v-if="option1[0] !='4'">
				<div class="tableTitle">
					<span class="midText">
						<h3 class="center-title">自选服务</h3>
					</span>
				</div>
				<h4 class="h4 applyNo17">是否自选代理人<span class="required-tag">*</span></h4>
				<span class="span4">1-默认为<span class="span2">“否——N”</span>，不指定代理人，系统将为您随机分配一位 代理人；</span>
				<br />
				<span class="span4">2-如果有熟悉的代理人，需要指定，请选择<span class="span2">“是——Y”</span>，并输入 代理人姓名；</span>
				<br />
				<span class="span4">3-自选代理人<span class="span2">需额外支付代理人服务费！</span>代理人服务费价格为 100元/件起！具体金额会根据代理人被选择的热度每月进行调整！</span>
				<br /><br />
				<el-select class="applyNo17Box" v-model="option3" placeholder="请选择">
					<el-option v-for="item in option3Arr" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<div v-if="!isHiddenDrop">
					<h4 class="h4 applyNo18">代理人<span class="required-tag">*</span></h4>
					<span class="span4">请输入您希望选择的代理人姓名</span>
					<br />
					<el-input class="applyNo18Box" placeholder="请输入内容" v-model="agent"></el-input>
					<!-- <el-autocomplete class="applyNo18Box" @blur="selectBlur" v-model="agent" :fetch-suggestions="querySearch" placeholder="" @select="selectAgent"></el-autocomplete> -->
				</div>
				<h4 class="h4 applyNo19">自助加速 <span class="required-tag">*</span></h4>
				<el-select class="applyNo19Box" v-model="option4" placeholder="请选择">
					<el-option v-for="item in option4Arr" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<center class="submit-btn">
				<el-button type="primary" @click="submit">&nbsp;&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
			</center>

			<van-dialog
				style="font-size: 16px;
    					padding: 10px 20px;"
				v-model="Dialogshow"
				title="消息"
				confirmButtonText="继续申请"
				cancelButtonText="去登录"
				@confirm="confirm"
				@cancel="cancel"
				show-cancel-button
				>
				订单编号：{{details.order_number ? details.order_number : ''}},您的专属顾问是：{{details.process && details.process.email_work ? details.process.email_work.split('@')[0].slice(-3) : '暂无' }},48小时之内会和您联系。如果您对订单有任何疑问可以联系专属顾问,联系电话：{{details.process && details.process.phone ? details.process.phone :''}}
			</van-dialog>
		</div>
	</div>
</template>

<script>
	import {
		validation
	} from './validate'
	import {
		scroll
	} from '~/util/index.js'

	export default {
		data() {
			return {
				Dialogshow: false,
				details: {},
				options: [{
					value: '1',
					label: '1'
				}, {
					value: '2',
					label: '2',
					children: [{
						value: 'a',
						label: '在线填写'
					}, {
						value: 'b',
						label: '上传文件'
					}]
				}, {
					value: '3',
					label: '3'
				}],
				// , {
				// 	value: '4',
				// 	label: '4'
				// }, {
				// 	value: '5',
				// 	label: '5'
				// }
				trademarkType: '1',
				trademarkName: '',
				trademarkText: '',
				pictureType1: '1',
				pictureType2: '1',
				isColour: false,
				trademarkCategory: '',
				option5Val1: '',
				option5Val2: '',
				option5Val3: '',
				option5Val4: '',
				option5Val5: '',
				option5Val6: '1',
				option5Val7: '',
				option5Val8: '',
				option5Val9: '',
				option5Val10: '',
				option5Val11: '',
				option5Val12: '',
				option5Val13: '',
				option5Val14: '',
				option5Val15: '',
				option5Val16: '',
				option5Val17: '',
				agentArr: [], //代理人列表
				subscriptioImg: require('~/assets/img/20191022133920.png'),
				uploadImgUrl: global.baseurl + '/api/upload/img',
				uploadFileUrl: global.baseurl + '/api/upload/file',
				logoImg: require('~/assets/img/20191017101604.png'),
				option1: ['1'], //'请选择',
				option2: 'N', //'请选择',
				option3: 'N', //'请选择',
				option4: 'C',
				field: '',
				textarea: '',
				textarea2: '',
				textarea3: '',
				textarea4: '',
				textarea5: '',
				isHiddenTextarea: true,
				fileList: [],
				fileList2: [],
				fileListV: [],
				fileList2V: [],
				option1Arr: [{
					value: 1,
					label: 1
				}, {
					value: 2,
					label: 2
				}, {
					value: 3,
					label: 3
				}],
				option2Arr: [{
					value: 'N',
					label: 'N'
				}, {
					value: 'Q',
					label: 'Q'
				}, {
					value: 'A',
					label: 'A'
				}, {
					value: 'QA',
					label: 'QA'
				}],
				option3Arr: [{
					value: 'Y',
					label: 'Y'
				}, {
					value: 'N',
					label: 'N'
				}],
				option4Arr: [{
					value: 'A',
					label: '10个工作日'
				}, {
					value: 'B',
					label: '20个工作日'
				}, {
					value: 'C',
					label: '30个工作日'
				}],
				option5Arr: [{
					value: '1',
					label: '个人'
				}, {
					value: '2',
					label: '企业'
				}],
				option6Arr: [{
					value: '1',
					label: '身份证号码'
				}, {
					value: '2',
					label: '营业执照'
				}],
				patentArr: [{
					value: '发明专利',
					label: '发明专利'
				}, {
					value: '实用新型',
					label: '实用新型'
				}, {
					value: '外观设计',
					label: '外观设计'
				}, 
				// {
				// 	value: '软件著作权',
				// 	label: '软件著作权'
				// }, {
				// 	value: '商标',
				// 	label: '商标'
				// }, 
				{
					value: '不确定',
					label: '不确定'
				}],
				patent: [],
				patentName: '',
				patentedPerson: '',
				inventor: '',
				IDCard: '',
				contacts: '',
				contactsPhone: '',
				email: '',
				agent: '',
				isHiddenDrop: true,
				country: [{
					label: '热门国家',
					options: [{
						value: 'China',
						label: '中国'
					}, ]
				}, {
					label: '所有国家',
					options: [{
							value: 'Angola',
							label: '安哥拉'
						},
						{
							value: 'Afghanistan',
							label: '阿富汗'
						},
						{
							value: 'Albania',
							label: '阿尔巴尼亚'
						},
						{
							value: 'Algeria',
							label: '阿尔及利亚'
						},
						{
							value: 'Andorra',
							label: '安道尔共和国'
						},
						{
							value: 'Anguilla',
							label: '安圭拉岛'
						},
						{
							value: 'Antigua and Barbuda',
							label: '安提瓜和巴布达'
						},
						{
							value: 'Argentina',
							label: '阿根廷'
						},
						{
							value: 'Armenia',
							label: '亚美尼亚'
						},
						{
							value: 'Ascension',
							label: '阿森松'
						},
						{
							value: 'Australia',
							label: '澳大利亚'
						},
						{
							value: 'Austria',
							label: '奥地利'
						},
						{
							value: 'Azerbaijan',
							label: '阿塞拜疆'
						},
						{
							value: 'Bahamas',
							label: '巴哈马'
						},
						{
							value: 'Bahrain',
							label: '巴林'
						},
						{
							value: 'Bangladesh',
							label: '孟加拉国'
						},
						{
							value: 'Barbados',
							label: '巴巴多斯'
						},
						{
							value: 'Belarus',
							label: '白俄罗斯'
						},
						{
							value: 'Belgium',
							label: '比利时'
						},
						{
							value: 'Belize',
							label: '伯利兹'
						},
						{
							value: 'Benin',
							label: '贝宁'
						},
						{
							value: 'Bermuda Is',
							label: '百慕大群岛'
						},
						{
							value: 'Bolivia',
							label: '玻利维亚'
						},
						{
							value: 'Botswana',
							label: '博茨瓦纳'
						},
						{
							value: 'Brazil',
							label: '巴西'
						},
						{
							value: 'Brunei',
							label: '文莱'
						},
						{
							value: 'Bulgaria',
							label: '保加利亚'
						},
						{
							value: 'Burkina Faso',
							label: '布基纳法索'
						},
						{
							value: 'Burma',
							label: '缅甸'
						},
						{
							value: 'Burundi',
							label: '布隆迪'
						},
						{
							value: 'Cameroon',
							label: '喀麦隆'
						},
						{
							value: 'Canada',
							label: '加拿大'
						},
						{
							value: 'Cayman Is',
							label: '开曼群岛'
						},
						{
							value: 'Central African Republic',
							label: '中非共和国'
						},
						{
							value: 'Chad',
							label: '乍得'
						},
						{
							value: 'Chile',
							label: '智利'
						},
						{
							value: 'China',
							label: '中国'
						},
						{
							value: 'Colombia',
							label: '哥伦比亚'
						},
						{
							value: 'Congo',
							label: '刚果'
						},
						{
							value: 'Cook Is',
							label: '库克群岛'
						},
						{
							value: 'Costa Rica',
							label: '哥斯达黎加'
						},
						{
							value: 'Cuba',
							label: '古巴'
						},
						{
							value: 'Cyprus',
							label: '塞浦路斯'
						},
						{
							value: 'Czech Republic',
							label: '捷克'
						},
						{
							value: 'Denmark',
							label: '丹麦'
						},
						{
							value: 'Djibouti',
							label: '吉布提'
						},
						{
							value: 'Dominica Rep',
							label: '多米尼加共和国'
						},
						{
							value: 'Ecuador',
							label: '厄瓜多尔'
						},
						{
							value: 'Egypt',
							label: '埃及'
						},
						{
							value: 'EI Salvador',
							label: '萨尔瓦多'
						},
						{
							value: 'Estonia',
							label: '爱沙尼亚'
						},
						{
							value: 'Ethiopia',
							label: '埃塞俄比亚'
						},
						{
							value: 'Fiji',
							label: '斐济'
						},
						{
							value: 'Finland',
							label: '芬兰'
						},
						{
							value: 'France',
							label: '法国'
						},
						{
							value: 'French Guiana',
							label: '法属圭亚那'
						},
						{
							value: 'French Polynesia',
							label: '法属玻利尼西亚'
						},
						{
							value: 'Gabon',
							label: '加蓬'
						},
						{
							value: 'Gambia',
							label: '冈比亚'
						},
						{
							value: 'Georgia',
							label: '格鲁吉亚'
						},
						{
							value: 'Germany',
							label: '德国'
						},
						{
							value: 'Ghana',
							label: '加纳'
						},
						{
							value: 'Gibraltar',
							label: '直布罗陀'
						},
						{
							value: 'Greece',
							label: '希腊'
						},
						{
							value: 'Grenada',
							label: '格林纳达'
						},
						{
							value: 'Guam',
							label: '关岛'
						},
						{
							value: 'Guatemala',
							label: '危地马拉'
						},
						{
							value: 'Guinea',
							label: '几内亚'
						},
						{
							value: 'Guyana',
							label: '圭亚那'
						},
						{
							value: 'Haiti',
							label: '海地'
						},
						{
							value: 'Honduras',
							label: '洪都拉斯'
						},
						{
							value: 'Hungary',
							label: '匈牙利'
						},
						{
							value: 'Iceland',
							label: '冰岛'
						},
						{
							value: 'India',
							label: '印度'
						},
						{
							value: 'Indonesia',
							label: '印度尼西亚'
						},
						{
							value: 'Iran',
							label: '伊朗'
						},
						{
							value: 'Iraq',
							label: '伊拉克'
						},
						{
							value: 'Ireland',
							label: '爱尔兰'
						},
						{
							value: 'Israel',
							label: '以色列'
						},
						{
							value: 'Italy',
							label: '意大利'
						},
						{
							value: 'Ivory Coast',
							label: '科特迪瓦'
						},
						{
							value: 'Jamaica',
							label: '牙买加'
						},
						{
							value: 'Japan',
							label: '日本'
						},
						{
							value: 'Jordan',
							label: '约旦'
						},
						{
							value: 'Kampuchea (Cambodia )',
							label: '柬埔寨'
						},
						{
							value: 'Kazakstan',
							label: '哈萨克斯坦'
						},
						{
							value: 'Kenya',
							label: '肯尼亚'
						},
						{
							value: 'Korea',
							label: '韩国'
						},
						{
							value: 'Kuwait',
							label: '科威特'
						},
						{
							value: 'Kyrgyzstan',
							label: '吉尔吉斯坦'
						},
						{
							value: 'Laos',
							label: '老挝'
						},
						{
							value: 'Latvia',
							label: '拉脱维亚'
						},
						{
							value: 'Lebanon',
							label: '黎巴嫩'
						},
						{
							value: 'Lesotho',
							label: '莱索托'
						},
						{
							value: 'Liberia',
							label: '利比里亚'
						},
						{
							value: 'Libya',
							label: '利比亚'
						},
						{
							value: 'Liechtenstein',
							label: '列支敦士登'
						},
						{
							value: 'Lithuania',
							label: '立陶宛'
						},
						{
							value: 'Luxembourg',
							label: '卢森堡'
						},
						{
							value: 'Madagascar',
							label: '马达加斯加'
						},
						{
							value: 'Malawi',
							label: '马拉维'
						},
						{
							value: 'Malaysia',
							label: '马来西亚'
						},
						{
							value: 'Maldives',
							label: '马尔代夫'
						},
						{
							value: 'Mali',
							label: '马里'
						},
						{
							value: 'Malta',
							label: '马耳他'
						},
						{
							value: 'Mariana Is',
							label: '马里亚那群岛'
						},
						{
							value: 'Martinique',
							label: '马提尼克'
						},
						{
							value: 'Mauritius',
							label: '毛里求斯'
						},
						{
							value: 'Mexico',
							label: '墨西哥'
						},
						{
							value: 'Moldova',
							label: '摩尔多瓦'
						},
						{
							value: 'Monaco',
							label: '摩纳哥'
						},
						{
							value: 'Mongolia',
							label: '蒙古'
						},
						{
							value: 'Montserrat Is',
							label: '蒙特塞拉特岛'
						},
						{
							value: 'Morocco',
							label: '摩洛哥'
						},
						{
							value: 'Mozambique',
							label: '莫桑比克'
						},
						{
							value: 'Namibia',
							label: '纳米比亚'
						},
						{
							value: 'Nauru',
							label: '瑙鲁'
						},
						{
							value: 'Nepal',
							label: '尼泊尔'
						},
						{
							value: 'Netheriands Antilles',
							label: '荷属安的列斯'
						},
						{
							value: 'Netherlands',
							label: '荷兰'
						},
						{
							value: 'New Zealand',
							label: '新西兰'
						},
						{
							value: 'Nicaragua',
							label: '尼加拉瓜'
						},
						{
							value: 'Niger',
							label: '尼日尔'
						},
						{
							value: 'Nigeria',
							label: '尼日利亚'
						},
						{
							value: 'North Korea',
							label: '朝鲜'
						},
						{
							value: 'Norway',
							label: '挪威'
						},
						{
							value: 'Oman',
							label: '阿曼'
						},
						{
							value: 'Pakistan',
							label: '巴基斯坦'
						},
						{
							value: 'Panama',
							label: '巴拿马'
						},
						{
							value: 'Papua New Cuinea',
							label: '巴布亚新几内亚'
						},
						{
							value: 'Paraguay',
							label: '巴拉圭'
						},
						{
							value: 'Peru',
							label: '秘鲁'
						},
						{
							value: 'Philippines',
							label: '菲律宾'
						},
						{
							value: 'Poland',
							label: '波兰'
						},
						{
							value: 'Portugal',
							label: '葡萄牙'
						},
						{
							value: 'Puerto Rico',
							label: '波多黎各'
						},
						{
							value: 'Qatar',
							label: '卡塔尔'
						},
						{
							value: 'Reunion',
							label: '留尼旺'
						},
						{
							value: 'Romania',
							label: '罗马尼亚'
						},
						{
							value: 'Russia',
							label: '俄罗斯'
						},
						{
							value: 'Saint Lueia',
							label: '圣卢西亚'
						},
						{
							value: 'Saint Vincent',
							label: '圣文森特岛'
						},
						{
							value: 'Samoa Eastern',
							label: '东萨摩亚(美)'
						},
						{
							value: 'Samoa Western',
							label: '西萨摩亚'
						},
						{
							value: 'San Marino',
							label: '圣马力诺'
						},
						{
							value: 'Sao Tome and Principe',
							label: '圣多美和普林西比'
						},
						{
							value: 'Saudi Arabia',
							label: '沙特阿拉伯'
						},
						{
							value: 'Senegal',
							label: '塞内加尔'
						},
						{
							value: 'Seychelles',
							label: '塞舌尔'
						},
						{
							value: 'Sierra Leone',
							label: '塞拉利昂'
						},
						{
							value: 'Singapore',
							label: '新加坡'
						},
						{
							value: 'Slovakia',
							label: '斯洛伐克'
						},
						{
							value: 'Slovenia',
							label: '斯洛文尼亚'
						},
						{
							value: 'Solomon Is',
							label: '所罗门群岛'
						},
						{
							value: 'Somali',
							label: '索马里'
						},
						{
							value: 'South Africa',
							label: '南非'
						},
						{
							value: 'Spain',
							label: '西班牙'
						},
						{
							value: 'SriLanka',
							label: '斯里兰卡'
						},
						{
							value: 'St.Lucia',
							label: '圣卢西亚'
						},
						{
							value: 'St.Vincent',
							label: '圣文森特'
						},
						{
							value: 'Sudan',
							label: '苏丹'
						},
						{
							value: 'Suriname',
							label: '苏里南'
						},
						{
							value: 'Swaziland',
							label: '斯威士兰'
						},
						{
							value: 'Sweden',
							label: '瑞典'
						},
						{
							value: 'Switzerland',
							label: '瑞士'
						},
						{
							value: 'Syria',
							label: '叙利亚'
						},
						{
							value: 'Tajikstan',
							label: '塔吉克斯坦'
						},
						{
							value: 'Tanzania',
							label: '坦桑尼亚'
						},
						{
							value: 'Thailand',
							label: '泰国'
						},
						{
							value: 'Togo',
							label: '多哥'
						},
						{
							value: 'Tonga',
							label: '汤加'
						},
						{
							value: 'Trinidad and Tobago',
							label: '特立尼达和多巴哥'
						},
						{
							value: 'Tunisia',
							label: '突尼斯'
						},
						{
							value: 'Turkey',
							label: '土耳其'
						},
						{
							value: 'Turkmenistan',
							label: '土库曼斯坦'
						},
						{
							value: 'Uganda',
							label: '乌干达'
						},
						{
							value: 'Ukraine',
							label: '乌克兰'
						},
						{
							value: 'United Arab Emirates',
							label: '阿拉伯联合酋长国'
						},
						{
							value: 'United Kiongdom',
							label: '英国'
						},
						{
							value: 'United States of America',
							label: '美国'
						},
						{
							value: 'Uruguay',
							label: '乌拉圭'
						},
						{
							value: 'Uzbekistan',
							label: '乌兹别克斯坦'
						},
						{
							value: 'Venezuela',
							label: '委内瑞拉'
						},
						{
							value: 'Vietnam',
							label: '越南'
						},
						{
							value: 'Yemen',
							label: '也门'
						},
						{
							value: 'Yugoslavia',
							label: '南斯拉夫'
						},
						{
							value: 'Zimbabwe',
							label: '津巴布韦'
						},
						{
							value: 'Zaire',
							label: '扎伊尔'
						},
						{
							value: 'Zambia',
							label: '赞比亚'
						}
					]
				}]
			}
		},
		created() {
			let that = this;
			// that.$axios.get('/api/user/agent', {
			// 		params: {
			// 			role_id: 2 //角色id为2的是代理人角色
			// 		}
			// 	})
			// 	.then(res => {
			// 		if (res.data.code == 200) {
			// 			let arr = res.data.data;
			// 			for(let key in arr){
			// 				//element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
			// 				arr[key].value = arr[key].name;
			// 			}
			// 			that.agentArr.push(...arr);
			// 		}
			// 	})
		},
		mounted() {
			if (document.getElementsByClassName('order').length >= 0) {
				let top = document.getElementsByClassName('order')[0].getBoundingClientRect().top + document.getElementsByClassName(
					'subscriptio')[0].clientHeight;
				let left = document.getElementsByClassName('order')[0].getBoundingClientRect().left + document.getElementsByClassName(
					'order')[0].clientWidth + 10;
				document.getElementsByClassName('subscriptio')[0].style['top'] = top + 'px';
				document.getElementsByClassName('subscriptio')[0].style['left'] = left + 'px';
			}
			//二维码图片随window窗口变化一直吸附在左边的logo图右边。
			window.onresize = () => {
				if (document.getElementsByClassName('order').length >= 0) {
					let top = document.getElementsByClassName('order')[0].getBoundingClientRect().top + document.getElementsByClassName(
						'subscriptio')[0].clientHeight;
					let left = document.getElementsByClassName('order')[0].getBoundingClientRect().left + document.getElementsByClassName(
						'order')[0].clientWidth + 10;
					document.getElementsByClassName('subscriptio')[0].style['top'] = top + 'px';
					document.getElementsByClassName('subscriptio')[0].style['left'] = left + 'px';
				}
			}
		},
		methods: {
			//图片上传
			handlePreview(file) {

			},
			handleRemove(file, fileList) {
				let that = this;
				//从服务器也删除此文件
				that.$axios.delete('/api/delete/file', {
					data: {
						path: that.fileListV[fileList.length]
					}
				})
				that.fileListV.splice(fileList.length, 1);
			},
			handleSuccess(res, file, fileList) {
				this.fileListV.push(res.data);
			},
			beforeUpload(file) {
				let that = this;
				let canUpload = true; //是否能够上传（布尔值）
				let type = file.name.substring(file.name.lastIndexOf('.') + 1);
				//不区分大小写
				if (!/jpg|jpeg|png|gif/i.test(type)) {
					that.$message({
						message: "文件格式只能是jpg/jpeg/png/gif",
						type: 'warning',
						offset: 200,
						center: true,
					});
					canUpload = false;
				}
				let size = file.size / 1024 / 1024;
				if (size > 10) {
					that.$message({
						message: "文件大小不能超过10M",
						type: 'warning',
						offset: 200,
						center: true
					});
					canUpload = false;
				}
				return canUpload;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			//文件上传
			handlePreview2(file) {},
			handleRemove2(file, fileList) {
				let that = this;
				//从服务器也删除此文件
				that.$axios.delete('/api/delete/file', {
					data: {
						path: that.fileList2V[fileList.length]
					}
				})
				that.fileList2V.splice(fileList.length, 1);
			},
			handleSuccess2(res, file, fileList) {
				this.fileList2V.push(res.data);
			},
			beforeUpload2(file) {
				let that = this;
				let canUpload = true; //是否能够上传（布尔值）
				let type = file.name.substring(file.name.lastIndexOf('.') + 1);
				//不区分大小写
				if (!/doc|docx/i.test(type)) {
					that.$message({
						message: "文件格式只能是doc/docx",
						type: 'warning',
						offset: 200,
						center: true,
					});
					canUpload = false;
				}
				let size = file.size / 1024 / 1024;
				if (size > 100) {
					that.$message({
						message: "文件大小不能超过100M",
						type: 'warning',
						offset: 200,
						center: true,
					});
					canUpload = false;
				}
				return canUpload;
			},
			submitUpload2() {
				this.$refs.upload2.submit();
			},
			submit() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				//效验数据
				let validationError = '';
				if (this.option1[0] == '1' || this.option1[0] == '2' || this.option1[0] == '3') {
					validationError = validation({
						option1: that.option1,
						option4: that.option4,
						field: that.field,
						textarea: that.textarea,
						textarea2: that.textarea2,
						textarea3: that.textarea3,
						textarea4: that.textarea4,
						textarea5: that.textarea5,
						patent: that.patent,
						patentName: that.patentName,
						patentedPerson: that.patentedPerson,
						inventor: that.inventor,
						IDCard: that.IDCard,
						contacts: that.contacts,
						contactsPhone: that.contactsPhone,
						email: that.email,
						option3: that.option3,
						agent: that.agent,
						img: that.fileListV.join('&'),
						file: (that.option1[0] == '3' || that.option1[1] == 'b') ? that.fileList2V.join('&') : ''
					})
				}
				if (validationError === '') {
					let parameter = {
						// consumer_id: that.$store.state.user.id,
						problem: that.textarea2,
						pattern: that.option1[0],
						service: that.option4,
						plan: that.textarea3,
						advantage: that.textarea4,
						img: that.fileListV.join('&'),
						type: that.patent.join(','),
						patent_name: that.patentName,
						patent_user: that.patentedPerson,
						user_name: that.inventor,
						id_card: that.IDCard,
						liaisons: that.contacts,
						liaisons_tel: that.contactsPhone,
						liaisons_email: that.email,
						zixuan: that.option3,
						//非必传
						file: (that.option1[0] == '3' || that.option1[1] == 'b') ? that.fileList2V.join('&') : '',
						way: that.option1[1] == 'a' ? that.textarea5 : '',
						territory: (that.isHiddenTextarea ? '' : that.field),
						background: (that.isHiddenTextarea ? '' : that.textarea),
						agent_name: that.option3 == 'Y' ? that.agent : ''
					}
					that.$axios.post('/api/order', parameter)
						.then(res => {
							console.log(res, 'res')
							if (res.data.code == 200) {
								this.details = res.data.data
								
								loading.close()
								this.Dialogshow = true

								// that.$message({
								// 	message: '订单提交成功！',
								// 	type: 'success',
								// 	offset: 200,
								// 	center: true,
								// })
								//发送邮件
								// if(res.data.agent && res.data.agent.id){
								// 	that.$axios.post('/api/'+res.data.agent.id+'/send/'+res.data.id+'/email')
								// 	.then(res => {
								// 		that.$router.push({
								// 			name: 'index'
								// 		})
								// 	})
								// }else{
								// 	
								// }
								// that.$router.push({
								// 	name: 'index'
								// })
							} else {
								//清空上传的图片和附件
								let delFileList = [];
								delFileList.push(...that.fileListV);
								delFileList.push(...that.fileList2V);
								if (delFileList.length > 0) {
									that.$axios.delete('/api/delete/file', {
											data: {
												path: delFileList.join('&')
											}
										})
										.then(res => {
											that.fileList.splice(0, that.fileList.length);
											that.fileListV.splice(0, that.fileListV.length);
											that.fileList2.splice(0, that.fileList2.length);
											that.fileList2V.splice(0, that.fileList2V.length);
										})
								} else {
									that.fileList.splice(0, that.fileList.length);
									that.fileListV.splice(0, that.fileListV.length);
									that.fileList2.splice(0, that.fileList2.length);
									that.fileList2V.splice(0, that.fileList2V.length);
								}
								that.$message({
									message: res.data.message,
									type: 'error',
									offset: 200,
									center: true
								});
							}
						})
				} else {
					that.$message({
						message: validationError.text,
						type: 'warning',
						offset: 200,
						center: true,
					});
					//滑动到需要修改的选项处
					scroll('.' + validationError.ele);
					//聚焦到需要修改的选项处
					document.getElementsByClassName(validationError.ele + 'Box')[0].getElementsByTagName(validationError.tag)[0].focus();

					loading.close()
				}
			},
			confirm() {
				console.log('comfirm')
				this.$message({
					message: '订单提交成功！',
					type: 'success',
					offset: 200,
					center: true,
				})
				this.$router.go(0);
			},
			cancel() {
				console.log('cancel')
				this.$message({
					message: '订单提交成功！',
					type: 'success',
					offset: 200,
					center: true,
				})
				this.$router.push({
					name: 'index'
				})
			},
			querySearch(queryString, cb) {
				let that = this;
				var agentArr = this.agentArr;
				var results = queryString ? agentArr.filter(that.createFilter(queryString)) : agentArr;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return agentArr => {
					//===0代表从首个字符处匹配必须成功，>=0代表从任意字符处匹配必须成功
					return (agentArr.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
				};
			},
			selectAgent(item) {
				this.agent = item.name;
			},
			//代理人名称必须输入全名
			selectBlur() {
				let that = this;
				let hasAgent = false;
				for (let key in that.agentArr) {
					if (that.agentArr[key] == that.agent) {
						hasAgent = true;
						break;
					}
				}
				if (!hasAgent) {
					that.agent = '';
				}
			},
			//根据文字生成图片
			canvasWrapText(options) {
				//绘制文字到canvas，判断换行位置，和设置canvas高度
				var settings = {
					canvas: document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
					canvasWidth: 480, //canvas的宽度
					drawStartX: 10, //绘制字符串起始x坐标
					drawStartY: 30, //绘制字符串起始y坐标
					lineHeight: 30, //文字的行高
					font: "24px 'Microsoft Yahei'", //文字样式
					text: "请修改掉默认的配置", //需要绘制的文本
					drawWidth: 460, //文字显示的宽度
					color: "#000000", //文字的颜色
					backgroundColor: "#ffffff", //背景颜色
				};

				//将传入的配置覆盖掉默认配置
				if (!!options && typeof options === "object") {
					for (var i in options) {
						settings[i] = options[i];
					}
				}

				//获取2d的上线文开始设置相关属性
				var canvas = settings.canvas;
				canvas.width = settings.canvasWidth;
				var ctx = canvas.getContext("2d");

				//绘制背景色
				ctx.fillStyle = settings.backgroundColor;
				ctx.fillRect(0, 0, canvas.width, canvas.height);

				//绘制文字
				ctx.font = settings.font;
				ctx.fillStyle = settings.color;
				var lineWidth = 0; //当前行的绘制的宽度
				var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
				//由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中
				var arr = [];
				for (var i = 0; i < settings.text.length; i++) {
					//获取当前的截取的字符串的宽度
					lineWidth = ctx.measureText(settings.text.substr(lastTextIndex, i - lastTextIndex)).width;

					if (lineWidth > settings.drawWidth) {
						//判断最后一位是否是标点符号
						if (judgePunctuationMarks(settings.text[i - 1])) {
							arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex));
							lastTextIndex = i;
						} else {
							arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex - 1));
							lastTextIndex = i - 1;
						}
					}
					//将最后多余的一部分添加到数组
					if (i === settings.text.length - 1) {
						arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex + 1));
					}
				}

				//根据arr的长度设置canvas的高度
				canvas.height = arr.length * settings.lineHeight + settings.drawStartY;

				ctx.font = settings.font;
				ctx.fillStyle = settings.color;
				for (var i = 0; i < arr.length; i++) {
					ctx.fillText(arr[i], settings.drawStartX, settings.drawStartY + i * settings.lineHeight);
				}
				//判断是否是需要避开的标签符号
				function judgePunctuationMarks(value) {
					var arr = [".", ",", ";", "?", "!", ":", "\"", "，", "。", "？", "！", "；", "：", "、"];
					for (var i = 0; i < arr.length; i++) {
						if (value === arr[i]) {
							return true;
						}
					}
					return false;
				}
				return canvas.toDataURL();
			},
			// setP(){
			// 	let that = this;
			// 	//调用函数获取到img的data数据，data是base64码
			// 	let baseStr = that.canvasWrapText({
			// 		canvas: document.getElementById("canvas"),
			// 		text: that.trademarkName
			// 	});
			// 	that.fileList.push(baseStr);
			// }
		},
		watch: {
			option1(val, oldVal) {
				if (val[1] == 'a') {
					this.isHiddenTextarea = false;
				} else {
					this.isHiddenTextarea = true;
				}
			},
			option3(val, oldVal) {
				if (val == 'Y') {
					this.isHiddenDrop = false;
				} else {
					this.isHiddenDrop = true;
				}
			}
		}
	}
</script>

<style lang="less">
	#order-root {
		font-size: 30px;
		.required-tag {
			color: #d9534f;
		}

		/deep/ .el-input__inner,
		/deep/.el-textarea__inner{
			line-height: 40px
		}


		.el-cascader,
		.el-select{
			width: 100%;
		}

		.el-input{
			width: 100%;
			input{
				max-width: 100% !important;
			}
		}

		width: 100%;
		// padding-top: 20px;
		background-color: rgb(237, 241, 246);

		.subscriptio {
			display: none;
			z-index: 100;
			position: fixed;
			right: 195px;
			top: 19px;
			width: 180px;
			height: 180px;
		}

		.order {
			box-sizing: border-box;//必须加这个！防止padding导致html撑出可视窗口范围（即100%）
			padding: 20px;
			background-color: white;
			margin-left: auto;
			margin-right: auto;
			// width: 60%;
			width: 100%;
			.logo-box {
				background: gainsboro;
				margin-left: auto;
				margin-right: auto;
				padding-top: 5px;
				padding-bottom: 5px;

				.logo-img {
					height: 150px;
					width:90%;
				}
			}

			.order-title {
				color: rgb(31, 116, 199);
				font-weight: bold;
				font-style: normal;
				margin: 50px 0 0 0;
				line-height: 60px;
			}

			.hr {
				margin-top: 10px;
				border: 1px solid #c5cfdb;
				/*no*/
			}

			.center-title {
				color: rgb(240, 173, 78);
				font-weight: bold;
				// font-size: 25px;
			}

			.center-title2 {
				color: rgb(23, 140, 223);
				font-weight: bold;
			}

			.h4 {
				color: #3d464d;
				font-weight: bold;
				margin-top: 10px;
				margin-bottom: 10px;
				// font-size: 30px;
			}

			.ul {
				list-style: none;
				padding-inline-start: 0;
			}

			.span1 {
				color: rgb(217, 83, 79);
				font-weight: bold;
			}

			.span2 {
				color: rgb(23, 140, 223);
				font-weight: bold;
			}

			.span4 {
				color: gray;
			}

			.b {
				color: #3d464d;
			}

			.field {
				margin-top: 10px;

				.el-input__inner {
					max-width: 400px;
					height: 40px !important;
					/*no*/
				}
			}

			.upload-demo {
				margin-top: 10px;
			}

			.submit-btn {
				margin-top: 100px;
			}
		}
		.tableTitle {
			position: relative;
			margin: 70px auto;/*no*/
			height: 1px;/*no*/
			background-color: #d4d4d4;
			text-align: center;
			font-size: 16px;/*no*/
			color: rgba(101, 101, 101, 1);
		}
		
		.midText {
			position: absolute;
			left: 50%;
			background-color: #ffffff;
			padding: 0 15px;/*no*/
			transform: translateX(-50%) translateY(-50%);
		}
	}
</style>